<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. -->
<!-- See LICENSE in the project root for license information -->

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HPO</title>

    <!-- Office JavaScript API : use office.js for production and office.debug.js for dev-->
    <script type="text/javascript" src="./node_modules/@microsoft/office-js/dist/office.js"></script>

    <!-- LOCAL -->
    <link rel="stylesheet" href="node_modules/office-ui-fabric-js/dist/css/fabric.min.css" />
    <link rel="stylesheet" href="node_modules/office-ui-fabric-js/dist/css/fabric.components.css" />
    <link rel="stylesheet" href="assets/lib/jstree/dist/themes/default/style.min.css" />
    <link href="app.css" rel="stylesheet" type="text/css" />
</head>

<body class="ms-font-m ms-welcome">
    <div id="content-header">
        <div class="padding">
            <h1>HPO</h1>
        </div>
    </div>
    <div id="content-main">
        <div class="padding">
            <div>
                <input id="hpo_search" type="text">
            </div>
            <div id="hpo_tree">
            </div>
        </div>
    </div>

    <script type="text/javascript" src="node_modules/core-js/client/core.js"></script>
    <script type="text/javascript" src="node_modules/jquery/dist/jquery.js"></script>
    <script type="text/javascript" src="assets/lib/jstree/dist/jstree.min.js"></script>
    <script type="text/javascript" src="node_modules/office-ui-fabric-js/dist/js/fabric.js"></script>
    <script type="text/javascript" src="bundle.js"></script>
    <script>
        $(function () {
            $("#hpo_tree").jstree({
                "core": {
                    'data': {
                        'url': './assets/hpo.json'
                    }
                },
                "plugins": ["search"]
            });
            var to = false;
            $('#hpo_search').keyup(function (e) {
                if(e.which == 13) {
                    var v = $('#hpo_search').val();
                    $('#hpo_tree').jstree(true).search(v);
                }
            });
        });
    </script>
</body>

</html>